<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>
<style>
    .time {
        display: flex;
        width: 80vw;
        height: 300px;
        margin: auto;
        line-height: 300px;
        font-size: 50px;


    }

    span {
        flex: 1;
        background-color: black;
        color: aliceblue;
        font-size: 50px;
        text-align: center;
        line-height: 300px;

    }

    span:nth-child(4) {
        animation: rotateplane4 1s infinite ease-in-out;
    }

    @keyframes rotateplane4 {
       
        0% {
            transform: rotateX(180deg);
        }

        50% {
            transform: rotateX(360deg);
        }

        100% {
            transform: rotateX(360deg);

        }
    }

    span:nth-child(3) {
        animation: rotateplane3 60s infinite ease-in-out;
    }

    @keyframes rotateplane3 {
        0% {
            transform: rotateX(180deg);
        }

        1% {
            transform: rotateX(360deg);
        }

        100% {
            transform: rotateX(360deg);

        }
    }
    span:nth-child(2) {
        animation: rotateplane2 3600s infinite ease-in-out;
    }

    @keyframes rotateplane2 {
        
        0.00001%{
            transform: rotateX(180deg);
        }

        0.2% {
            transform: rotateX(360deg);
        }

        100% {
            transform: rotateX(360deg);

        }
    }
    span:nth-child(2) {
        animation: rotateplane2 86400s infinite ease-in-out;
    }

    @keyframes rotateplane2 {
       
        0.00001%{
            transform: rotateX(180deg);
        }
        0.001% {
            transform: rotateX(360deg);
        }

        100% {
            transform: rotateX(360deg);

        }
    }
</style>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">

    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                day: 0,     //倒计时--天
                hour: 0,    //倒计时--时
                minute: 0,  //倒计时--分
                second: 0,   //倒计时--秒

            }
            this.gett()
            this.countFun(2); // 倒计时 参数hour 为倒计时几小时
        }
        gett = ()=>{
            let data =  new Date().getTime() //获取毫秒数跟  格式化的是一样的
            console.log(data);
        }
        // 倒计时方法封装
        countFun = (hour=0, minute=0) => {
            let new_date = new Date() //获取现在的时间进行操作
            new_date.setHours(new_date.getHours() + hour) //在现在时间上加 hour小时
            new_date.setMinutes(new_date.getMinutes() + minute)
            let endTime = Date.parse(new_date) //格式化操作后的时间
            let now_time = Date.parse(new Date()); //格式化现在的时间
            var remaining = endTime - now_time; // 时间差

            this.timer = setInterval(() => {
                //防止出现负数
                if (remaining > 1000) {
                    remaining -= 1000;
                    let day = Math.floor((remaining / 1000 / 3600) / 24);
                    let hour = Math.floor((remaining / 1000 / 3600) % 24);
                    let minute = Math.floor((remaining / 1000 / 60) % 60);
                    let second = Math.floor(remaining / 1000 % 60);

                    this.setState({
                        day: day,
                        hour: hour < 10 ? "0" + hour : hour,
                        minute: minute < 10 ? "0" + minute : minute,
                        second: second < 10 ? "0" + second : second
                    })
                } else {
                    clearInterval(this.timer);
                    //倒计时结束时触发父组件的方法
                    //this.props.timeEnd();         
                }
            }, 1000);
        }


        render() {

            return (
                <div className="time">
                    {/*<input type="text" placeholder='请输入小时' name="" id=""/>*/}
                    <span>{this.state.day}天</span>:
                    <span>{this.state.hour}时</span>:
                    <span>{this.state.minute}分</span>:
                    <span>{this.state.second}秒 </span>
                </div>
            )
        }
    }


    ReactDOM.render(<App />, document.getElementById('root'))



</script>